<template>
  <div>
    <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="所属id:" :labelLg="5">
        <Input type="text" v-model="queryParam.masterId.value" placeholder="请输入用户/应用id" clearable />
      </SearchBarItem>
      <SearchBarItem label="类型:">
        <RemoteSelect
          :api="tokenTypeApi"
          v-model="queryParam.type.value"
          placeholder="请选择"
          clearable
        />
      </SearchBarItem>
      <SearchBarItem label="是否过期:">
        <Select v-model="queryParam.isExpire" placeholder="请选择" clearable>
          <Option :value="0">否</Option>
          <Option :value="1">是</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="强制过期:">
        <Select v-model="queryParam.forceInvalid.value" placeholder="请选择" clearable>
          <Option value="false">否</Option>
          <Option value="true">是</Option>
        </Select>
      </SearchBarItem>
      <SearchBarItem label="主键:" slot="more" :labelLg="5">
        <Input type="text" v-model="queryParam.id.value" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="clientId:" slot="more">
        <Input type="text" v-model="queryParam.thirdClientId.value" placeholder="请输入" clearable />
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns"></RemoteTable>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import config from "@/utils/config";
import RemoteSelect from "@/components/RemoteSelect";
import Action from "./Action";
import { namespace } from "../module";
import { Button, Input, Select, Option, Tag } from "view-design";
import moment from "moment";
export default {
  name: "md-lock",
  components: {
    RemoteTable,
    Button,
    Input,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    RemoteSelect
  },
  data: function() {
    return {
      namespace: namespace,
      columns: [
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250,
          fixed: "left"
        },
        {
          title: "所属人/应用id",
          key: "masterId",
          align: "center",
          width: 250
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          width: 150,
          render(h, data) {
            let color = "geekblue";
            if (data.row.type === 0) {
              color = "success";
            } else if (data.row.type === 1) {
              color = "purple";
            } else if (data.row.type === 2) {
              color = "magenta";
            } else if (data.row.type === 3) {
              color = "red";
            } else if (data.row.type === 4) {
              color = "volcano";
            } else if (data.row.type === 5) {
              color = "orange";
            } else if (data.row.type === 6) {
              color = "gold";
            } else if (data.row.type === 7) {
              color = "geekblue";
            } else if (data.row.type === 8) {
              color = "lime";
            } else if (data.row.type === 9) {
              color = "green";
            } else if (data.row.type === 10) {
              color = "cyan";
            } else if (data.row.type === 11) {
              color = "blue";
            }
            return h(Tag, { props: { color: color } }, data.row.typeName);
          }
        },
        {
          title: "颁发时间",
          key: "expire",
          align: "center",
          width: 150,
          render(h, data) {
            return h(
              "div",
              moment(data.row.createDate).format("YYYY-MM-DD HH:mm:ss")
            );
          }
        },
        {
          title: "过期时间",
          key: "expire",
          align: "center",
          width: 150,
          render(h, data) {
            return h(
              "div",
              moment(data.row.expire).format("YYYY-MM-DD HH:mm:ss")
            );
          }
        },
        {
          title: "过期",
          key: "isExpire",
          align: "center",
          width: 70,
          render(h, data) {
            if (data.row.isExpire) {
              return h(Tag, { props: { color: "warning" } }, "是");
            } else {
              return h(Tag, { props: { color: "success" } }, "否");
            }
          }
        },
        {
          title: "强制失效",
          key: "forceInvalid",
          align: "center",
          width: 90,
          render(h, data) {
            if (data.row.forceInvalid) {
              return h(Tag, { props: { color: "error" } }, "是");
            } else {
              return h(Tag, { props: { color: "success" } }, "否");
            }
          }
        },
        {
          title: "clientId",
          key: "thirdClientId",
          align: "center",
          ellipsis: "true",
          minWidth: 250
        },
        {
          title: "token",
          key: "token",
          align: "center",
          ellipsis: "true",
          minWidth: 300
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: "",
          width: 70,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    tokenTypeApi() {
      return (
        config.serverProxy +
        config.authServicePath +
        "/auth/token/getTokenTypeSelectOptions"
      );
    },
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
      set(value) {
        this.$store.commit(`${namespace}/saveState`, {
          query: value
        });
      }
    }
  },
  methods: {
    handleSearch() {
      let queryParam = this.queryParam;
      queryParam.expire = {};
      if (queryParam.isExpire != null) {
        if (queryParam.isExpire) {
          queryParam.expire = {
            operator: "less",
            value: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
          };
        } else {
          queryParam.expire = {
            operator: "more",
            value: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
          };
        }
      }
      this.$store.dispatch(`${namespace}/query`, {
        limit: {
          currentPage: 1
        }
      });
    }
  }
};
</script>

<style>
</style>